<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nikki UI 主题测试</title>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #FFF5F7 0%, #FFE4E1 50%, #FFF0F5 100%);
            min-height: 100vh;
        }
        
        .theme-container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 24px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(255, 182, 193, 0.3);
        }
        
        .theme-selector {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            justify-content: center;
        }
        
        .theme-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .theme-btn.pink {
            background: linear-gradient(135deg, #FF9ACD 0%, #FFB6C1 50%, #FFC0CB 100%);
            color: white;
        }
        
        .theme-btn.blue {
            background: linear-gradient(135deg, #4682B4 0%, #87CEEB 50%, #B0E0E6 100%);
            color: white;
        }
        
        .theme-btn.purple {
            background: linear-gradient(135deg, #9370DB 0%, #DDA0DD 50%, #E6E6FA 100%);
            color: white;
        }
        
        .demo-section {
            margin: 20px 0;
            padding: 20px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.8);
        }
        
        .demo-button {
            padding: 12px 24px;
            border: none;
            border-radius: 20px;
            margin: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .demo-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 240, 245, 0.9) 100%);
            border-radius: 24px;
            padding: 25px;
            margin: 20px 0;
            box-shadow: 0 20px 60px rgba(255, 182, 193, 0.3);
        }
        
        h1 {
            text-align: center;
            color: #FF69B4;
            margin-bottom: 30px;
        }
        
        h2 {
            color: #FF69B4;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="theme-container">
        <h1>🌸 Nikki UI 主题测试</h1>
        
        <div class="theme-selector">
            <button class="theme-btn pink" onclick="setTheme('pink')">🌸 梦幻粉色</button>
            <button class="theme-btn blue" onclick="setTheme('blue')">💎 梦幻蓝色</button>
            <button class="theme-btn purple" onclick="setTheme('purple')">💜 梦幻紫色</button>
        </div>
        
        <div class="demo-section">
            <h2>按钮组件</h2>
            <button class="demo-button primary" style="background: linear-gradient(135deg, #FF9ACD 0%, #FFB6C1 50%, #FFC0CB 100%); color: white;">主要按钮</button>
            <button class="demo-button secondary" style="background: linear-gradient(135deg, #E6E6FA 0%, #F0F8FF 50%, #F5FFFA 100%); color: #6B46C1;">次要按钮</button>
            <button class="demo-button outline" style="background: rgba(255, 255, 255, 0.9); color: #FF9ACD; border: 2px solid #FF9ACD;">轮廓按钮</button>
        </div>
        
        <div class="demo-card">
            <h2>卡片组件</h2>
            <p>这是一个梦幻风格的卡片组件，支持主题切换。当切换主题时，卡片的颜色会相应改变。</p>
        </div>
        
        <div class="demo-section">
            <h2>当前主题信息</h2>
            <p id="theme-info">当前主题：梦幻粉色</p>
        </div>
    </div>

    <script>
        const themes = {
            pink: {
                name: '梦幻粉色',
                primary: '#FF9ACD',
                secondary: '#E6E6FA',
                text: '#FF69B4',
                background: 'linear-gradient(135deg, #FFF5F7 0%, #FFE4E1 50%, #FFF0F5 100%)',
                cardBackground: 'linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 240, 245, 0.9) 100%)',
                shadow: 'rgba(255, 182, 193, 0.3)'
            },
            blue: {
                name: '梦幻蓝色',
                primary: '#4682B4',
                secondary: '#E6F3FF',
                text: '#2C5282',
                background: 'linear-gradient(135deg, #F0F8FF 0%, #E6F3FF 50%, #F5FAFF 100%)',
                cardBackground: 'linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 248, 255, 0.9) 100%)',
                shadow: 'rgba(70, 130, 180, 0.3)'
            },
            purple: {
                name: '梦幻紫色',
                primary: '#9370DB',
                secondary: '#F3E5FF',
                text: '#6B46C1',
                background: 'linear-gradient(135deg, #F8F4FF 0%, #F3E5FF 50%, #FAF7FF 100%)',
                cardBackground: 'linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 244, 255, 0.9) 100%)',
                shadow: 'rgba(147, 112, 219, 0.3)'
            }
        };

        function setTheme(themeName) {
            const theme = themes[themeName];
            if (!theme) return;

            // 更新页面背景
            document.body.style.background = theme.background;
            
            // 更新标题颜色
            document.querySelector('h1').style.color = theme.text;
            document.querySelectorAll('h2').forEach(h2 => {
                h2.style.color = theme.text;
            });
            
            // 更新按钮样式
            const primaryBtn = document.querySelector('.demo-button.primary');
            primaryBtn.style.background = `linear-gradient(135deg, ${theme.primary} 0%, ${theme.primary}CC 50%, ${theme.primary}99 100%)`;
            
            const secondaryBtn = document.querySelector('.demo-button.secondary');
            secondaryBtn.style.background = `linear-gradient(135deg, ${theme.secondary} 0%, ${theme.secondary}CC 50%, ${theme.secondary}99 100%)`;
            secondaryBtn.style.color = theme.text;
            
            const outlineBtn = document.querySelector('.demo-button.outline');
            outlineBtn.style.color = theme.primary;
            outlineBtn.style.borderColor = theme.primary;
            
            // 更新卡片样式
            const card = document.querySelector('.demo-card');
            card.style.background = theme.cardBackground;
            card.style.boxShadow = `0 20px 60px ${theme.shadow}`;
            
            // 更新容器样式
            const container = document.querySelector('.theme-container');
            container.style.boxShadow = `0 20px 60px ${theme.shadow}`;
            
            // 更新主题信息
            document.getElementById('theme-info').textContent = `当前主题：${theme.name}`;
        }

        // 初始化为粉色主题
        setTheme('pink');
    </script>
</body>
</html>